コレクションメタデータ管理

所要時間：20分このガイドでは、Cloudflare Workers を使って Sequence Collections API でメディアを保存し、Metadata API から画像を取得して表示する方法を説明します。この手順は8ステップで完了します。

Sequence Builder Console から Secret API Key を取得します。
cURLリクエストでコレクションを作成（初回のみ）
トークンを作成（tokenIDを使ってトークンを作成）
アセットを作成（assetIDを作成）
画像を保存（画像を処理して保存）
非プライベートに更新
cURLリクエストでコレクションを公開（一度だけ）
cURLリクエストでAPIからアセットを表示（一度だけ）

まず、Collectible Minting Service Guideのこのセクションに従ってCloudflare Workerを作成してください。

1. シークレットAPIキー（JWT_ACCESS_KEY）を取得する

バックエンドサービスを利用するには、リクエストを認証するためのSecret API Keyが必要です。まずは設定画面にアクセスし、Sequence Builder ConsoleでAPI Keysを選択します。

下にスクロールして「+ Add Admin API Secret Key」を選択してください

アクセス権を「write」に変更し、「+ Add API Secret Key」を押して確定します

最後にキーをコピーし、wrangler.toml の JWT_ACCESS_KEY として保存してください。今後は Sequence Builder コンソールからこのキーにアクセスできなくなります。

2. cURLリクエストからコレクションを作成する

サービスにメディアをアップロードするためには、最初にコレクションを作成する必要があります。Builder Console から取得した Secret API Key と projectID を使用します。サービスにリクエストを送り、collectionID を取得します。

curl --location 'https://metadata.sequence.app/rpc/Collections/CreateCollection' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <jwt_access_key>' \
--data '{
    "projectId": <project_id>,
    "collection": {
        "metadata": {
            "name": "<collection_name>",
            "description": "<description>",
            "external_link" : "<https://link>"
        },
        "image": "",
        "decimals": <decimals_typically_as_0>,
        "properties": null,
        "attributes": null
    }
}'

レスポンスで返された collectionID を wrangler.toml の COLLECTION_ID に設定します。

3. TokenID を使ってトークンを作成する

Cloudflare Worker を利用する場合は、wrangler.toml に node_compat = true を追加し、@0xsequence/metadata パッケージで window オブジェクトを利用可能にします。

SequenceCollections を利用するために、pnpm install @0xsequence/metadata で metadata パッケージをインストールします。

import { SequenceCollections } from '@0xsequence/metadata'
import { ethers } from 'ethers'
...
const METADATA_URL = 'https://metadata.sequence.app'
const collectionsService = new SequenceCollections(METADATA_URL, JWT_ACCESS_KEY)

const randomTokenIDSpace = ethers.BigNumber.from(ethers.hexlify(ethers.randomBytes(20)))

const res1 = await collectionsService.createToken({
	projectId: projectID,
	collectionId: collectionID,
	token: {
		tokenId: String(randomTokenIDSpace),
		name: name,
		description: description,
		decimals: 0,
		attributes: attributes // can leave blank
	}
})

4. TokenID を使ってアセットを作成する

リクエストで metadataField（assetType）を image に設定し、必要な他のフィールドも入力して、次のステップで使用するアセットレスポンスを取得します。

const jsonCreateAsset = await collectionsService.createAsset({
	projectId: projectID,
	asset: {
		id: Number(String(randomTokenIDSpace).slice(0,10)),
		collectionId: collectionID,
		tokenId: String(randomTokenIDSpace),
		metadataField: "image"
	}
})

5. 画像アセットを保存する

前の jsonCreateAsset オブジェクトから渡された asset.id を使用します。

	...
	const uploadAsset = async (env: Env, projectID: any, collectionID: any, assetID: any, tokenID: any, url: any) => {
		const response = await fetch(url);
		if (!response.ok) throw new Error(`Failed to fetch file from ${url}: ${response.statusText}`);
		const arrayBuffer = await response.arrayBuffer();
		const blob = new Blob([arrayBuffer]);

		const formData = new FormData();
		
		formData.append('file', blob);
		
		let METADATA_URL = 'https://metadata.sequence.app'

		// Construct the endpoint URL
		const endpointURL = `${METADATA_URL}/projects/${projectID}/collections/${collectionID}/tokens/${tokenID}/upload/${assetID}`;

		try {
			// Use fetch to make the request
			const fetchResponse = await fetch(endpointURL, {
				method: 'PUT',
				body: formData,
				headers: {
					Authorization: `Bearer ${env.JWT_ACCESS_KEY}`, // Put your token here
				},
			});
		
			// Assuming the response is JSON
			const data = await fetchResponse.json();

			return data;
		}catch(err){
			console.log(err)
		}
	}
	...
	const uploadAssetRes = await uploadAsset(env, projectID, collectionID, jsonCreateAsset.asset.id, String(randomTokenIDSpace), imageUrl)
	...

返された uploadAssetRes.url が Sequence サーバー上のメディアファイルの URL です。

6. 非プライベートトークンを更新する

次に、private ブール値を false に設定してトークンを非プライベートにします。

const res3 = await collectionsService.updateToken({
	projectId: projectID,
	collectionId: collectionID,
	private: false,
	tokenId: String(randomTokenIDSpace),
	token: {
		name: name,
		attributes: attributes,
		tokenId: String(randomTokenIDSpace),
	}
})

7. cURLリクエストからコレクションを公開する

最後に、これも一度だけのリクエストとして、projectID と collectionID をもとに以下のコマンドを実行してコレクションを公開します。

curl --location 'https://metadata.sequence.app/rpc/Collections/PublishCollection' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <jwt_access_key> \
--data '{
    "projectId": <project_id>,
    "collectionId": <collection_id>
}'

これにより、コレクション内でprivateフラグが false に設定されたすべてのトークンが公開され、その他のトークンは変更されるまで非表示のままになります。

8. APIからアセットを公開レンダリングする

これまでの作業をテストするには、変数を更新した上でこの cURL リクエストを実行し、ファイルをローカル端末にダウンロードできます。または、ブラウザに貼り付けて画像を確認することもできます。同じコードを使用した場合、<file_name> は image.png になります。

[cURL]

curl --location 'https://metadata.sequence.app/projects/<project_id>/collections/<collection_id>/tokens/<token_id>/<file_name>' --output stored_file.png

また、コレクションを ERC721 や ERC1155 の baseURI に使用する場合は、スマートコントラクトの setBaseMetadataURI に以下の URI を書き込みます。

https://metadata.sequence.app/projects/<project_id>/collections/<collection_id>/tokens/

スマートコントラクトは自動的に tokenID を末尾に付加します。お試しください。

[cURL]

curl https://metadata.sequence.app/projects/1229/collections/40/tokens/457657099779485875855215293997335918990635014431

またはブラウザで確認

API からアセットをプライベートにレンダリングする

資産を非公開（tokenパラメータでprivate: true）にした場合でも、ヘッダーにjwt_access_keyを指定すればトークン画像を表示できます。このガイドでは、metadata_field は image に設定されています

[cURL]

curl --location 'https://metadata.sequence.app/projects/<project_id>/collections/<collection_id>/tokens/<token_id>/asset/<metadada_field>' \
--header 'Authorization: Bearer <jwt_access_key>' \
--output stored_file.png

このガイドの全コードはこちらでご覧いただけます。

ガイド

ボイラープレート

​1. シークレットAPIキー（JWT_ACCESS_KEY）を取得する

​2. cURLリクエストからコレクションを作成する

​3. TokenID を使ってトークンを作成する

​4. TokenID を使ってアセットを作成する

​5. 画像アセットを保存する

​6. 非プライベートトークンを更新する

​7. cURLリクエストからコレクションを公開する

​8. APIからアセットを公開レンダリングする

​API からアセットをプライベートにレンダリングする

1. シークレットAPIキー（JWT_ACCESS_KEY）を取得する

2. cURLリクエストからコレクションを作成する

3. TokenID を使ってトークンを作成する

4. TokenID を使ってアセットを作成する

5. 画像アセットを保存する

6. 非プライベートトークンを更新する

7. cURLリクエストからコレクションを公開する

8. APIからアセットを公開レンダリングする

API からアセットをプライベートにレンダリングする